<script setup lang="ts">
import { onMounted, ref } from 'vue';
import type { Ref } from 'vue';

import { gethotTeacherMonthList } from '@/api/user';

const hotTeacherMonthList: Ref<string[]> = ref([])
onMounted(() => {
    gethotTeacherMonthList({}).then(res => {
        console.log(4, res.data.hotTeacherMonthList);
        hotTeacherMonthList.value = res.data.hotTeacherMonthList
    })
})
function onClickLeft(){
    history.back()
}
</script>
<template>
    <div>
        <header>
            <van-nav-bar  left-text="返回" left-arrow @click-left="onClickLeft" />
        </header>
        <van-cell title="本月热门老师"></van-cell>
        <div class="attention" v-for="item in hotTeacherMonthList" :key="item">
            <div class="left">
                <div class="lefticon">
                    <van-image :src="item.icon" round></van-image>
                </div>
                <div class="leftinfo">
                    <div class="teachername">{{ item.name }}</div>
                    <div class="teacherip">{{ item.city }}</div>
                </div>
            </div>
            <div class="right">
                <van-button type="primary">已关注</van-button>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.attention {
    display: flex;
    height: 40px;
    // margin-bottom: 14px;
    padding: 10px;

    .left {
        width: 70vw;
        display: flex;

        .lefticon {
            width: 20vww;

            .van-image {
                width: 100%;
                height: 100%;
            }
        }

        .leftinfo {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 14px;
        }
    }

    .right {
        width: 30vw;

        .van-button {

            float: right;
        }
    }
}
</style>